:root {
    --background-hamburger: #16fea9;
    --background-kreisfarbe: #4eeab154;
    --background-text: #08ff7b54;

}

/* Hamburger Menü (immer fixiert oben rechts) */
.hamburger-menu {
    top: 45px;
    background-color:var(--background-hamburger);
    padding: 8px;
    box-shadow: 5px 5px 15px rgba(4, 255, 71, 0.866);
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 15px;
    justify-content: space-between;
    cursor: pointer;
    position: fixed;
    right: 20px;
    z-index: 1000;
    margin-top: 40px;  /* Abstand von oben */
}
  
.hamburger-menu div {
    background-color: rgb(56, 56, 56);
    height: 3px;
    width: 100%;
}

/* Side Menu (Rechts) */
.side-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    position: fixed;
    top: 75px;
    right: -250px;  /* Menü initial außerhalb des Bildschirms */
    width: 120px;
    height: 23%;
    box-shadow: 5px 5px 10px rgba(221, 221, 221, 0.714);
    background-color: rgba(214, 214, 214, 0.337);
    backdrop-filter: blur(12px);
    transition: right 0.3s ease-in-out;
    z-index: 100;
}



.side-menu a:hover {
    background-color: #16fea9;  /* Hintergrundfarbe beim Hover */
    border-radius: 5px;  /* Optionale Abrundung */
}
/* Wenn das Menü aktiv ist */
.side-menu.active {
    right: 0; /* Menü wird sichtbar, wenn 'active' hinzugefügt wird */
}


/* Container für die Liste */
.rectangle-list {
    list-style-type: none; /* Entfernt die Standard-Aufzählung */
    padding: 0;
    margin: 0;
}

.rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background:  var(--background-text);
    color: #1d1d1d;
    font-size: .85em;
    text-decoration: none;
    transition: all .3s ease-out;
    text-align: right;  /* Text rechts ausrichten */
}

.rectangle-list a:hover {
    background: #eaeaea;
}

.rectangle-list a:before {
    content: ' ';
}

/* Kreis -------------------- */
.rectangle-list a:before {
    position: absolute;
    left: -1em;  /* Der Kreis wird links vom Text positioniert */
    top: 50%;  /* Vertikal zentrieren */
    margin-top: -1em;  /* Vertikal zentrieren des Kreises */
    background: var(--background-kreisfarbe);  /* Kreisfarbe */
    height: 2em;
    width: 2em;
    border-radius: 10%;  /* Der Kreis wird rund */
}

/* Strich, der beim Hover erscheint */
.rectangle-list a:after {
    position: absolute;
    content: '';
    border: .5em solid transparent;
    left: -1em;  /* Strich wird etwas versetzt */
    top: 50%;
    margin-top: -.5em;  /* Vertikal zentrieren */
    transition: all .3s ease-out;
    width: 0;  /* Zu Beginn ist der Strich unsichtbar */
}

/* Hover-Effekt für den Strich */
.rectangle-list a:hover:after {
    left: -.5em;
    border-left-color: var(--background-kreisfarbe);  /* Strichfarbe */
    width: 100%;  /* Der Strich wird beim Hover sichtbar und wächst */
}



/* Mobile View */
@media (max-width: 768px) {
    .rectangle-list {
        padding-right: 10px;
    }

    .side-menu.active {
      right: 0;
    }

    .hamburger-menu {
        top: 55px;
    }
    .side-menu {
        width: 130px;
    }
    
}